/**
app.js
 */
import React, {
	Component
} from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View,
	InteractionManager,
	ScrollView,
	BackAndroid,
	ToastAndroid,
	Platform,
} from 'react-native';


//公共组件
import BackTop from '../../common/BackTop'

//页面组件
import Swiper from './items/Swiper'
import GoodsClass from './items/GoodsClass'
import Active from './items/Active'
import Search from './items/Search'
import Login from '../../containers/Login'
/*
	*页面方法
*/
	//返回顶部按钮的显示隐藏
	backTopIsShow=(e)=>{
		let layoutHeight=e.nativeEvent.layoutMeasurement.height,
			scrollTop=e.nativeEvent.contentOffset.y;
		if(!this.state.backTop&&scrollTop>layoutHeight){
			this.setState({
				backTop:true
			})
		}else if(this.state.backTop&&scrollTop<layoutHeight){
			this.setState({
				backTop:false
			})
		}
	}


export default class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			name: 'wangwei',
			backTop:false,
		}
	}
	componentWillMount() {
		this.setState({
			backTop:false
		})
  	}
	// 跳转路由
	goToLogin(){
		const { navigator } = this.props.navigator;
		if(navigator) {
			navigator.push({
				name: 'Login',
				component: Login,
			})
		}
	}
	render() {
		let IcBackTop=null;
		if (this.state.backTop){
			IcBackTop=(
				<BackTop
					click={this.refs.scrollView}
					/>
			)
		}
		let json=[
			{
				id:'qmx111',
				uri:'https://img.allpyra.com/6a632c2d-8a90-485f-b916-8789afbc496b.png'
			},
			{
				id:'qmx222',
				uri:'https://img.allpyra.com/690ec8df-f5ac-46e6-ac34-4dee0ca15c61.png'
			},
			{
				id:'qmx333',
				uri:'https://img.allpyra.com/a7eb01c9-6778-4851-87bd-3123888bb3c3.jpg'
			},
			{
				id:'qmx444',
				uri:'https://img.allpyra.com/21a70ee3-d87a-42f6-a4f6-4e1ef07839aa.jpg'
			},
			{
				id:'qmx555',
				uri:'https://img.allpyra.com/f455460d-ebf0-43a5-bf72-0e0af5122ff6.png'
			}
		]

		return (
			<View style={s.container}>
				<Search navigator={this.props.navigator}/>
				<ScrollView
					style={[s.flex]}
					onContentSizeChange={(contentWidth, contentHeight)=>{console.log(contentWidth+'====='+contentHeight)}}
					onScroll={this.backTopIsShow}
					ref='scrollView'
					>
						{/*焦点图层*/}
						<Swiper
							data={json}
							/>
						{/*分类层*/}
						<GoodsClass />
						<Active
							data={json}
							/>
						<View style={{height:1000}}></View>
				</ScrollView>
				{IcBackTop}
			</View>
		);
	}
}



const s = StyleSheet.create({
	flex: {
		flex: 1,
	},
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	topone: {
		height: 40,
	},
	bottomone: {
		marginTop: 10,
		height: 40,
	},
	color: {
		flex: 1,
		backgroundColor: 'red'
	}

});
